<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <!--引用css文件-->
    <th:block th:replace="commont/common_header::commonHeader('eChartsDemo')"></th:block>
    <!--引用js文件-->
    <th:block th:include="commont/common_header::commonFooter"></th:block>
    <meta charset="UTF-8">
    <title>eChartsDemo</title>
    <style type="text/css">
        #eCharts {
            height: 500px;
            width: 500px;
        }
    </style>

</head>
<body>
<div id="eCharts"></div>
<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function () {
        var myChart = echarts.init(document.getElementById('eCharts'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            title: {
                text: 'eChartsDemo'
            },
            tooltip: {},
            // 工具栏
            toolbox: {
                show: true,
                feature: {
                    magicType: {
                        show: true,
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true,
                        title: '保存为图片',
                        type: 'png',
                        lang: ['点击保存']
                    }
                }
            },

            legend: {
                data: ['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        });

        // 异步加载数据
        $.get('/front/eChartsDemo').done(function (data) {
            // 填入数据
            myChart.setOption({
                xAxis: {
                    data: data.name
                },
                // 滚动条
                dataZoom: [
                    {   // 这个dataZoom组件，默认控制x轴。
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        start: 0,      // 左边在 10% 的位置。
                        end: 100         // 右边在 60% 的位置。
                    }
                ],
                series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: data.data
                }]
            });
        });
    });
    /*]]>*/
</script>
</body>
</html>